import React, {Component} from 'react'
import { Button,Calendar} from 'antd-mobile';

import {format} from "../utils/datetime"

export default class Timechoose extends Component {
  constructor (props){
   super(props)
   const {defaulthover} = this.props
   const {startTime,endTime} = this.props.time
   this.chkprops =  this.props.chkprops
   this.now = new Date()
   this.state= {
    startTime:startTime,
    endTime: endTime,
    showdata: false,
    config: {
     en:"zhCN",
     showShortcut: true,
     defaultValue: [new Date(+this.now - 86400000), new Date(+this.now - 345600000)]
    },
    hover:defaulthover
   }
}


howlongtime(day){
  return format(new Date(new Date().getTime() - day * 24 * 60 * 60 * 1000), 'Y-m-d')
}
quicktab(hover,day){
 this.setState({
   hover
 })
 let endTime = format(new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000), 'Y-m-d')
  this.chkprops(this.props,this.howlongtime(day),endTime,hover)
}

showdatachoose(){
  this.setState({
    showdata: true
  });
}

onConfirm = (startTime, endTime) => {
  document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
  this.setState({
    showdata: false,
    startTime:format(startTime, 'Y-m-d'),
    endTime:format(endTime, 'Y-m-d'),
  });
}

onCancel = () => {
  document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
  this.setState({
    showdata: false
  });
}

componentWillReceiveProps(nextprops){
  if(this.props.match.params.key != nextprops.match.params.key){
    this.setState({
        hover:0
      })
  }
  if(this.state.time != nextprops.time){
    const {startTime,endTime} = nextprops.time
    this.setState({
      startTime:startTime,
      endTime: endTime,
    })
  }
}

   render() {
    const {config,showdata,hover} = this.state
    const {startTime,endTime} = this.state
    console.log(startTime,endTime,"1wq");
    
   return <div className="timechoose">
        <ul>
          <li className={hover==0 ? "hover" : ""} onClick={()=>this.quicktab(0,0)}>今天</li>
          <li className={hover==1 ? "hover" : ""} onClick={()=>this.quicktab(1,7)} >一周</li>
          <li className={hover==2 ? "hover" : ""} onClick={()=>this.quicktab(2,30)}>一个月</li>
          <li className={hover==3 ? "hover" : ""} onClick={()=>this.quicktab(3,90)}>三个月</li>
        </ul>
        <div className="riqi" onClick={()=>{this.showdatachoose()}}>
          <li>{startTime.toLocaleString()}</li>
          <li>{endTime.toLocaleString()}</li>
        </div>
        <Button type="primary" onClick={()=>{this.chkprops(this.props,startTime,endTime,hover)}}>查询</Button>

        <Calendar
          {...config}
          visible={showdata}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          initalMonths={2}
          // getDateExtra={this.getDateExtra}
          defaultDate={new Date(+this.now - 2592000000)}
          minDate={new Date(+this.now - 51840000000)}
          maxDate={this.now}
        />
      </div>
   }
}